<template>
  <div>
    <nav-com title="独立负责人审批" :showView="showView" @back="backHandler()"></nav-com>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <div>
        <!-- <div style="display: flex; margin: 5vw 4vw">
          <img src="../../assets/my/ad-icon.png" style="width: 18px" />
          <div style="font-size: 15px; margin-left: -10px">
            待审批独立负责人
          </div>
        </div> -->
        <van-tabs @click="switchActive" color="#FF6B35" title-active-color="#FF6B35" title-inactive-color="#000000"
          v-model="active">
          <van-tab v-for="item in tabList" :key="index" :title="item">
            <div style="background:#fff;border-radius:10px;padding:0 15px; margin: 15px;    padding-bottom: 10px;
            box-shadow: 0px 3px 12px 1px rgba(107,107,107,0.1);">
              <div style="display: flex;
                    align-items: center;
                    justify-content: space-around;
                    color: #808080;
                    line-height: 40px;
                    border-bottom: 1px solid #EEEEEE;font-size: 12px;">
                <div style=" width: 25%;text-align: center;">手机号</div>
                <div style=" width: 30%;text-align: center;">级别</div>
                <div style=" width: 25%;text-align: center;">姓名</div>
                <div style=" width: 15%;text-align: center;">操作</div>
              </div>
              <div>
                
                <div v-for="item in dataList" :key="item.id" style="display: flex;
                    align-items: center;
                    justify-content: space-around;
                    line-height: 45px;
                    border-bottom: 1px solid #EEEEEE;font-size: 12px;">
                   
                  <div style=" width: 25%;text-align: center;">{{ item.mobile ? item.mobile : "暂无" }}</div>
                  <div style=" width: 30%;text-align: center;">{{ item.role_name }}</div>
                  <div style=" width: 25%;text-align: center;">{{ item.nickname }}</div>
                  <div v-if="active==0"  class="btn1" @click="submit(item.id)">通过</div>
                  <div v-if="active==1" class="btn2" >已通过</div>  
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-pull-refresh>
  </div>
</template>
  
<script>
import {
  getSellProfit,
  getSellProfitList,
  getProfitStatistics,
  ListIncome,
  ListSepIncome,
  extIncome
} from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import {
  RadioGroup,
  Radio,
  Field,
  CellGroup,
  Picker,
  Icon,
  Toast,
  Pagination,
  Calendar,
} from "vant";
export default {
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      active:0,
      tabList: ["待审批独立负责人", "已审批独立负责人",],
      showView: true,
      isLoading: false,
      allInfo: {},
      dataList: {},
      // dataList: [
      //   {
      //     goods_title: "VIKK",
      //     money: "30000.00",
      //     addtime: "2022-10-15",
      //   },
      //   {
      //     goods_title: "VIKK",
      //     money: "30000.00",
      //     addtime: "2022-10-15",
      //   },
      // ],
      dataInfo: {},
    };
  },
  filters: {
    roleFilter(val) {
      let roleName = {
        1: "推广员",
        2: "代言人",
        3: "一星网店经销商",
        4: "二星网店经销商",
        5: "银牌经销商",
        6: "金牌经销商",
        7: "钻石经销商",
      };
      return roleName[val];
    },
  },
  created() {
    this.initData(0);
  },
  methods: {
    switchActive(active) {
      if (active == 0) {
        this.dataList = []
        this.initData(0);
      }
      if (active == 1) {
        this.dataList = []
        this.initData(1);
      }
    },
    initData(type) {
      let operType=this.$route.params.operType;
      console.log("operType",operType);
      if(operType == 1){
        ListIncome({
        status:type,
      })
        .then((result) => {
          console.log("ListIncome", result);
          if (result.data.code == 1) {
            this.dataList = result.data.data;
            console.log(this.dataList);
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
      }else if(operType == 2){
        ListSepIncome({
        status:type,
      })
        .then((result) => {
          console.log("ListSepIncome", result);
          if (result.data.code == 1) {
            this.dataList = result.data.data;
            console.log(this.dataList);
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
      }
    
    },
    submit(id) {
      extIncome({ id: id })
        .then((result) => {
          console.log("extIncome", result);
          Toast(result.data.msg);
          if (result.data.code == 1) {
            this.initData();
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    onRefresh() {
      this.isLoading = false;
    },
  },
};
</script>
  
<style scoped>
.list-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2vw 4vw;
  width: 90vw;
  line-height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0px 2px 5px 1px rgb(254 75 32 / 10%);
  margin-bottom: 10px !important;
}

.list-box .list-box-all {
  font-size: 16px;
  color: #fe4b20;
}
</style>
<style>
  body{
    background-color: #f2f3f7;
  }
</style>
<style scoped>
/deep/.back_box{
  border-bottom: 1px solid #EEEEEE;
}
.top-bg {
  background: url("../../assets/ADbg.png");
  min-height: 38vw;
  padding: 5vw;
  background-repeat: round;
}

.top-bg .top-detail {
  background-color: #fff;
  min-height: 35vw;
  border-radius: 2vw;
  /* align-content: center; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.top-bg .top-detail .top-main {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 1vw 2vw;
  min-height: 35vw;
  text-align: center;
}

.top-bg .top-detail div .text {
  text-align: center;
  color: #808080;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 3.2vh;
}

.top-bg .top-detail div div .num {
  /* display: flex; */
  align-items: center;
  font-size: 16px;
  line-height: 30px;
  color: #fe4b20;
  display: block;
  /* width: 100px; */
}

.num {
  text-align: center;
  font-size: 18px;
  color: #fe4b20;
}

.list-box {
  background: #fff;
  border-radius: 10px;
  margin: 2vw auto;
  width: 95vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.list-box .list-box-all {
  margin-top: 2vw;
  color: #808080;
  font-size: 14px;
  padding: 1vw 1vw;
  display: flex;
  justify-content: space-around;
}

.list-box .list-box-all .box-left {
  line-height: 26px;
}

.list-box .list-box-all .box-left div {
  display: flex;
  align-items: center;
}

.list-box .list-box-all .box-right {
  margin-left: 0vw;
  text-align: center;
  margin-top: 3vw;
  font-size: 16px;
  color: #000;
}
.btn2{
               width:15%;text-align: center; 
                    background: #FE4B20;
                    opacity: 0.3;
                    padding: 7px 0;
                    line-height: 15px;
                    border-radius: 8px;
                    color: #fff;
                    font-weight: 500;
}
.btn1{
  width:15%;text-align: center;background-color: rgb(254, 75, 32);
                    padding: 7px 0;
                    line-height: 15px;
                    border-radius: 8px;
                    color: #fff;
                    font-weight: 500;
}
</style>